
#diagram-control {
    -webkit-user-select: none;                   /* prevents cut-and-paste */
    -webkit-tap-highlight-color: transparent;    /* prevents highlight/flash when item is selected */
}

.fog {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 10;
}

.graphic-lead {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

#diagram-control {
    padding: 1em;  /* margin around all elements of diagram-control */
}

/* Generation control */
#generation-strategy {
   border: 1px solid #5C5C5C;
   padding-right: 2;
   padding-bottom: 2;
}
#generation-strategy table {
   width: 100%;
   border-spacing: 0;
}
#generation-strategy th:first-child {
   background-image: linear-gradient(#E5E5E5 , #E5E5E5);
   border-right: 1px solid #E2E2E2;
   border-bottom: 1px solid #F2F2F2;
}
#generation-strategy th, #generation-strategy td:first-child {
   background-image: linear-gradient(#F1F1F1, #DFDFDF);
   border-right: 1px solid #B1B1B1;
   border-bottom: 1px solid #B1B1B1;
}
#generation-strategy tbody td {
   padding-left: 3px;
   background-color: white;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
}

#generation-strategy tbody tr td:first-child {
    width: 30px;
}

#generation-strategy tbody img {
    vertical-align: middle;
}

/* Arrow control */
#arrow-display {
   min-height: 80;
   background-color: white;
   width: 75%;
}
#arrow-list {
   margin-block-start: 0;
   margin-block-end: 0;
   padding-inline-start: 0;
}
#arrow-list > li {
   width: 100%;
}
#arrow-control hr {   /* Colored line in arrow display */
   display: inline-block;
   width: 25px;
   margin-block-start: 5px;
   margin-block-end: 5px;
   margin-inline-start: 5px;
   margin-inline-end: 5px;
}
#arrow-buttons {  /* vert container for buttons */
   width: 25%;
}
#arrow-buttons button {  /* Add, Remove buttons */
   font-size: 16px;      /* matches selects */
   margin: auto 0 auto 0;
}

/* Left-right multiplication select */
#multiplication-control {
    margin-top: 1em;
}
#multiplication-control > div {
    margin-left: 5%;
}
